<template>
	<div>
		<!-- 页签logo -->
		<img src="./assets/cxlogo.png" class="img" />
		<!-- 主体导航加载组件放入到router-view中 -->
		<div class="row">
			<div class="col-xs-offset-1 col-xs-9">
				<div class="page-header">
					<ul class="nav nav-pills nav-justified" style="font-size: 18px;">
						<!-- 配置动态数据 -->
						<template v-for="(item,index) in items">
							<!-- 判断点击的哪一项 -->
							<li @click="clickScript(index)" :class="index==active?'active':''">
								<!-- 插值语法配置数据 -->
								<router-link :to="item.path">{{item.tag}}</router-link>
							</li>
						</template>
						<!-- 点击登录 -->
						<li @click="login(isLogin)" style="cursor: pointer;">
							<el-avatar>{{userName}}</el-avatar>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<div class="col-xs-offset-0 col-xs-0">
			<!-- 显示的位置 -->
			<router-view></router-view>
		</div>
	</div>
</template>

<script>
	//引入axios
	import axios from 'axios'
	export default {
		name: 'App',
		//设置li选中样式
		methods: {
			clickScript(index) {
				//取反
				this.active = index
			},
			login(isL) {
				axios({
					//请求地址
					url: 'http://localhost:8080/axios/isLogin.do',
					//请求方式
					method: 'post',
				}).then(
					res => {
						//登录成功,重新赋值
						this.isLogin = res.data.isLogin

					},
					err => {
						console.log(err.message)
					}
				)
				if (isL === true) {
					var r = confirm("是否退出登录!");
					if (r == true) {
						//发起请求注销登录
						axios({
							//请求地址
							url: 'http://localhost:8080/axios/exitSystem',
							//请求方式
							method: 'post',
						}).then(
							res => {
								this.isLogin = false
								this.userName = '登录'
							},
							err => {
								console.log(err.message)
							}
						)
					} else {

					}
				} else {
					this.$router.push({
						name: 'login',
					})
				}
			},
		},
		mounted() {
			this.$bus.$on('receiveParam', (data) => {
				this.userName = data
			})
		},
		data() {
			return {
				//初始-1
				active: 0,
				isLogin: false,
				userName: '登录',
				//是否显示
				items: [{
					tag: '首页',
					path: '/operation'
				}, {
					tag: '日历',
					path: '/fanya'
				}, {
					tag: '用户管理',
					path: '/user'
				}, {
					tag: '教务课程应用',
					path: '/edu/about'
				}, {
					tag: '笔记记录',
					path: '/application'
				}/* , {
					tag: '终端配置',
					path: '/terminal'
				} */, {
					tag: '数据中心',
					path: '/data'
				}]
			}
		}
	}
</script>

<style>
	input[type="file"] {
		display: none
	}
</style>
